<template>
	<view class="video-footer">
		<view class="top-title">
			劲爆会员活动，<text>最低0.16元/天！</text>
		</view>
		<view class="box" v-for="(item,index) in Member" :key="index" @click="isunlock(item)">
			<view class="tishi" v-if="![8, 13].includes(item.type)">
				<image src="@/static/new-vip.png"></image>
			</view>
			<view class="price">
				{{item.money}}{{item.currency_type}}
			</view>
			<view class="box-day" v-if="![8, 13].includes(item.type)">
				全场书免费看{{item.day}}天
			</view>
			<view class="box-day" v-else-if="item.type==8">
				{{(parseFloat(item.money) * 100).toFixed(0)}}书币+赠送{{item.send_gold}}书币
			</view>
			<view class="box-day" v-else-if="item.type === 13">
				解锁本文免费看
			</view>
			<view class="box-footer" v-if="![8, 13].includes(item.type)">
				{{index==0?"85%用户选择":item.subscript==='超值'||item.subscript==='限时' ? '限时超值优惠':item.subscript }}
			</view>
			<view class="box-footer" v-else>
				{{item.title === '单本解锁' ?'免费看本书': item.title}}
			</view>

		</view>
	</view>
</template>

<script>
	import {
		Users
	} from "@/request/api.js"
	import {
		open_from,
		imId
	} from "@/request/open_from.js"
	import {
		handleMember
	} from '@/common/Newapp.js'
	import {
		getCloseFunction
	} from '@/common/modalHandler.js'
	const {
		getNovelManager
	} = tt;
	export default {
		props: ["chapterId", "bookId","search_keyword_id"],
		data() {
			return {
				Member: [],
				osName: '',
				novel: null,
				Recharge: {
					recharge_id: "",
					book_id: '0',
					fromtype: '1',
					pay_way: '1',
					pay_type: '',
					money: '',
					is_cont: '2',
					keyword_id: 0,
					recharge_type: 1
				},
				timer: null
			};
		},

		created() {
			this.osName = uni.getStorageSync('osName')
			console.log(this.osName,'this.osName');
			if(this.$props.bookId == uni.getStorageSync('bookId')){
				this.Recharge.keyword_id = uni.getStorageSync('keywords') || 0
			}else{
				this.Recharge.keyword_id = this.$globalData.searchKeywordId || 0
			}
			this.getMember()
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},

		methods: {
			//模拟解锁
			async isunlock(){
				// const novel = getNovelManager();
				
				// novel.setContents([{
				//   chapterId: this.$props.chapterId,
				//   status: 0
				// }])
				// const closePayModal = getCloseFunction()
				// closePayModal()
			},
			// 解锁
			async unlock(item) {
				
				this.Recharge.recharge_type = item.type
				this.Recharge.recharge_id = item.id
				this.Recharge.pay_type = open_from
				this.Recharge.money = this.osName == 'ios' ? item.money / 10 : item.money
				// this.Recharge.book_id = this.$props.bookId
				this.Recharge.book_id =uni.getStorageSync('outBookId')
				this.Recharge.fromtype = this.Recharge.keyword_id == 0 ? '2' : '4'
				if (this.osName == 'ios') {
					this.Recharge.is_ios = 1
				}
				uni.showLoading({
					title: '加载中'
				})
				let res = await Users.Recharge(this.Recharge)
				uni.hideLoading()
				if (res.status_code !== 200) {
					this.$u.toast(res.error_user_msg)
					return
				}
				let that = this
				tt.requestOrder({
					data: res.data.data.data,
					byteAuthorization: res.data.data.byteAuthorization,
					success(order) {
						// 苹果用户传入Im客服id,安卓不传
						let params = {
							orderId: order.orderId,
						}
						if (that.osName == 'ios') {
							params.imId = imId
						}
						tt.getOrderPayment({
							...params,
							success(payment) {
								that.requestOrderStatus(payment.orderId)
							},
							fail(err1) {
								that.$u.toast('支付失败')
							}
						})
					},
					fail(err) {
						that.$u.toast('订单出错')
					}
				})
			},

			// 结果查询
			requestOrderStatus(orderid) {
				let startTime = Date.now(); // 记录开始时间
				// 创建计时器，每3秒执行一次请求
				this.timer = setInterval(async () => {
					const res = await Books.orderStatus(orderid)
					if (res && res.data.pay_status == 'SUCCESS') {
						// 关闭弹窗
						const closePayModal = getCloseFunction()
						closePayModal()
						clearInterval(this.timer)
						console.log('充值成功')
					} else {
						console.log(res.data.pay_status)
					}
					if (Date.now() - startTime >= 60000) {
						clearInterval(this.timer);
					}
				}, 3000);
			},

			// 获取充值模板
			async getMember() {
				let result = await Users.Memberlist({
					passphrases: this.Recharge.keyword_id,
					operating_system_type: this.osName == 'ios' ? 2 : 1
				})
				if (result.status_code == 200) {
					this.Member = handleMember(result.data)
				}
			}
		}

	};
</script>

<style lang="less" scoped>
	.video-footer {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 40rpx;
	}

	.top-title {
		font-weight: 500;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #000000;
		margin-bottom: 30rpx;

		text {
			font-weight: 600;
			line-height: 40rpx;
			background: linear-gradient(134.61deg, #FFB38E -36.99%, #FF464E 28.72%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}
	}

	.box:first-child {
		position: relative;
		border: 4rpx solid #FF9D35;
		background: linear-gradient(203deg, #FFF7D1 33%, rgba(255, 255, 255, 0) 130%);

	}

	.box {
		box-sizing: border-box;
		width: calc(100% / 2 - 8rpx);
		position: relative;
		background: #FFFCEC;
		border-radius: 16rpx;
		margin: 20rpx 0;
		text-align: center;
		color: #3D3D3D;
		overflow: hidden;

		.tishi {
			position: absolute;
			top: -4rpx;
			right: 0;
			width: 70rpx;
			height: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.price {
			padding: 54rpx 0 20rpx 0;
			font-size: 38rpx;
			line-height: 38rpx;
			align-items: center;
			letter-spacing: -0.02em;

			text {
				font-size: 24rpx;
			}
		}

		.box-day {
			font-size: 26rpx;
			padding-bottom: 24rpx;
		}

		.send_gold {
			margin-top: 10rpx;
			font-size: 24rpx;
		}

		.box-footer {
			color: #fff;
			height: 50rpx;
			font-size: 20rpx;
			line-height: 50rpx;
			background: #EBC47C;

		}

	}

	.box:first-child .box-footer {
		background: #FF9D35 !important;

	}
</style>